@extends('layouts.admin')
@section('pageTitle', '数据统计')
@inject('storeService', 'App\App\Services\StorageService')
@section('style')
@endsection
@section('content')
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <div class="mini-charts">
                    <div class="row">
                        <div class="col-sm-6 col-md-3">
                            <div class="mini-charts-item">
                                <div class="clearfix">
                                    <div class="chart stats-bar">

                                    </div>
                                    <div class="count">
                                        <small>今日参与</small>
                                        <h2 id="tjoin">0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-3">
                            <div class="mini-charts-item">
                                <div class="clearfix">
                                    <div class="chart stats-line">

                                    </div>
                                    <div class="count">
                                        <small>累计参与</small>
                                        <h2 id="ajoin">0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-3">
                            <div class="mini-charts-item">
                                <div class="clearfix">
                                    <div class="chart stats-bar-2">

                                    </div>
                                    <div class="count">
                                        <small>进行活动</small>
                                        <h2 id="ranning_act">0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-sm-6 col-md-3">
                            <div class="mini-charts-item card">
                                <div class="clearfix">
                                    <div class="chart stats-line-2">

                                    </div>
                                    <div class="count">
                                        <small>累计活动</small>
                                        <h2 id="all_act">0</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <div class="header">
                        <legend>活动统计</legend>
                    </div>
                    <div class="content">
                        <div class="toolbar">
                            <button class="btn btn-success add-btn" data-url="/web/activity/add">
                                <i class="fa fa-plus"></i> 添加
                            </button>
                        </div>

                        <table id="bootstrap-table-container" class="table" data-url="/web-api/activity/statistics-list?category=2" data-delete-url="/web/activity/delete">
                            <thead>
                            {{--<th data-field="state" data-checkbox="true"></th>--}}
                            <th data-field="name" data-sortable="false">活动名称</th>
                            <th data-field="created_at" data-sortable="true">创建日期</th>
                            <th data-field="model.name" data-formatter="categoryFormatter" data-sortable="false">活动类型</th>
                            <th data-field="startTime" data-formatter="timeFormatter" data-sortable="false">有效期</th>
                            <th data-field="isPause" data-formatter="statusFormatter" data-sortable="false">状态</th>
                            <th data-field="shows" data-formatter="showsFormatter" data-sortable="false">浏览</th>
                            <th data-field="shows" data-formatter="joinFormatter" data-sortable="false">参与</th>
                            <th data-field="shows" data-formatter="winningFormatter" data-sortable="false">中奖</th>
                            <th data-field="actions" class="td-actions text-center" data-events="operateEvents" data-formatter="operateFormatter">查看</th>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div><!--  end card  -->
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        function showsFormatter(value, row, index) {
            return row.clicks;
        }
        function joinFormatter(value,row){
            return row.joins;
        }
        function winningFormatter(value,row){
            return row.winnings;
        }
        function categoryFormatter(value,row) {
            return row.model.name;
        }
        function timeFormatter(value,row) {
            return row.startTime +'</br>'+row.endTime;
        }
        function statusFormatter(value,row) {
            var str = '';
            if (row.isPause == 1){
                str = '<span class="text-warning">已暂停</span>';
                return str;
            }
            if ( moment(row.endTime).unix()<moment().unix()){
                str = '<span class="text-danger">已结束</span>';
            }else if(moment(row.endTime).unix()>moment().unix() && moment(row.startTime).unix()<=moment().unix()){
                str = '<span class="text-success">进行中</span>';
            }else {
                str = '<span class="text-info">未开始</span>';
            }
            return str;
        }
        $('.categoty-tab li').on('click',function () {
            var value = $(this).data('value');
            $(this).parent().find('li').removeClass('active');
            $(this).addClass('active');
            $('#bootstrap-table-container').bootstrapTable('refreshOptions',{
                queryParams:function(params){
                    return $.extend(params,{'category':value});
                }
            })

        });
        $('#bootstrap-table-container').on('refresh.bs.table',function (params) {
            console.log('refresh table params'+params);
        });

        var act_id ;//全局活动id
        var groupid;//全局分组id
        window.operateEvents = {
            'click .duijiang': function (e, value, row) {
                window.location.href = "/web/activityRecords/index?activity_id=" + row.id;
            }
        };

        function prizeNameFormatter(value,row) {
            return row.prize.name;
        }

        function operateFormatter(value,row,index) {
            var dropdown_id = 'dropdown_'+new Date().getTime();
            var actions = [];
            actions.push( [
                '<a rel="tooltip" title="查看详情" class="btn btn-simple btn-info btn-icon table-action view" href="/web/activity/dashboard?id='+row.id+'">',
                '查看详情',
                '</a>'
            ].join(''));

            return actions.join('');
        }
        $('#bootstrap-table-container').on('post-body.bs.table',function () {
            $('[rel="tooltip"]').tooltip();
        });

        $('#activity-list').perfectScrollbar('destroy');

        $(document).ready(function () {
            $.get('/web/activity/summary-total', function (res) {
                if (res.code == 0) {
                    $.each(res.data, function (i, v) {
                        $('#' + i).text(v);
                    })
                }
            });
        });
    </script>
@endsection